<template>
    <view class="index">
		<!-- <image @click="fabuFn" class="jia" src="../../static/images/index/jia.png" mode=""></image> -->
		<view class="bg-class">
			<image class="bg" src="../../static/images/index/bg.png" mode="widthFix"></image>
			<!-- <image src="https://medicine.sdshengyue.cn/uploads/images/20240109/2024010917532011c074630.png" mode="" style="position: absolute; top: 96rpx; left:28rpx; width: 180rpx; height: 70rpx;"></image> -->
		</view>
		
        <view v-for="(item, index) in state.pages" :key="index">
            <!-- <template v-if="item.name == 'search'">
                <w-search :content="item.content" :styles="item.styles" />
            </template> -->
            <template v-if="item.name == 'banner'">
                <w-banner class="swiper1" :content="item.content" :styles="item.styles" />
            </template>
          <!--  <template v-if="item.name == 'nav'">
                <w-nav :content="item.content" :styles="item.styles" />
            </template> -->
        </view>
       <!-- <view class="article" v-if="state.article.length"> -->
	   <view class="article">
         <!--   <view
                class="flex items-center article-title mx-[20rpx] my-[30rpx] text-2xl font-medium"
            >
                采购推荐
            </view>
			 -->
			 <view class="caigou" v-if="caiList.length>0">
			 	<view class="caigou-left">
			 		采购推荐
			 	</view>
				<view class="caigou-right" @click="gotuFn">
					<view class="caigou-duo">
						查看更多
					</view>
					<view class="img">
						<image class="left" src="../../static/images/index/left.png" mode=""></image>
					</view>
				</view>
			 </view>
            <news-card
                v-for="item in caiList"
                :key="item.id"
                :news-id="item.id"
                :item="item"
				:userId="item.user_id"
            />
			
			<view class="caigou" v-if="dataList.length>0">
			 	<view class="caigou-left">
			 		供应推荐
			 	</view>
				<view class="caigou-right" @click="gotuFn1">
					<view class="caigou-duo">
						查看更多
					</view>
					<view class="img">
						<image class="left" src="../../static/images/index/left.png" mode=""></image>
					</view>
				</view>
			 </view>
			<!-- <enterprise-card
			    v-for="item in state.article"
			    :key="item.id"
			    :news-id="item.id"
			    :item="item"
			/> -->
			<view v-for="item in dataList">
				<!-- <navigator :url="`/pages/collection/supply_details?id=${item.id}&userId=${item.user_id}`"> -->
				<view class="" @click="tiaoz(item.id,item.user_id)">
					
			
				    <view class="news-card flex bg-white1 px-[20rpx] py-[32rpx]">
				        <view class="mr-[20rpx]" v-if="item.fming">
				            <u-image :src="item.fming" width="220" height="200"></u-image>
				        </view>
				        <!-- <view class="news-card-content flex flex-col justify-between flex-1"> -->
						<view style="width: 65%;">
				            <!-- <view class="news-card-content-title text-lg font-medium">{{ item.title }}</view> -->
							<view class="card-titel">{{ item.name }}</view>
							<!-- <view class="gui">
								<view class="gui-item">
									规格：
								</view>
								<view class="huanhang">
									{{item.specifications}}
								</view>
							</view> -->
							<view class="gui">
								<view class="gui-item1">
									库存地：
								</view>
								<view class="huanhang">
									{{item.producer}}
								</view>
							</view>
							<view class="phone">
								<view class="">
									联系方式：
								</view>
								<view class="">
									{{item.contacts[0].tel}}
									<!-- {{item.contacts}} -->
								</view>
							</view>
				        </view>
				    </view>
				<!-- </navigator> -->
					</view>
			</view>
        </view>
        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { getIndex } from '@/api/shop'
import { reactive,ref } from 'vue'
import { getArticleCate,getArticleList,getsuList,getcaiList } from '@/api/news'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
	import { useUserStore } from '@/stores/user'
	import { storeToRefs } from 'pinia'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)
const state = reactive<{
    pages: any[]
    article: any[]
}>({
    pages: [],
    article: []
})
const getData = async () => {
    const data = await getIndex()
    state.pages = JSON.parse(data?.page?.data)
    state.article = data.article
}

const dataList=ref([])
const queryList = async () => {
    try {
        let data = await getsuList({})
		// console.log(data,'lists1111111111111111111');
		dataList.value=data.data
		dataList.value.forEach(item=>{
			item.contacts=JSON.parse(item.contacts)
		})
		if(dataList.value.length>6){
			dataList.value=dataList.value.slice(0,6)
		}
		// console.log(dataList.value,'dataList');
    } catch (e) {
        console.log('报错=>', e)
    }
}


onLoad((options) => {
    // getData()
	queryList()
	queryList1()
})
const caiList=ref([])
const queryList1 = async () => {
    try {
        const { data } = await getcaiList({
          
        })
		// console.log(lists,'lists1111111111111111111');
        // paging.value.complete(lists)
		caiList.value=data
		caiList.value.forEach(item=>{
			item.contacts=JSON.parse(item.contacts)
		})
		caiList.value.forEach(item=>{
			if(item.contacts.length!=0){
				item.contacts[0].tel=mobile(item.contacts[0].tel)
			}
			// item.contacts[0].tel=mobile(item.contacts[0].tel)
			console.log(item);
		})

			if(caiList.value.length>6){
				caiList.value=caiList.value.slice(0,6)
			}
		
    } catch (e) {
        console.log('报错=>', e)
    }
}
getData()
const mobile=(data)=>{
	return data.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}
const fabuFn=()=>{
	uni.navigateTo({
		url:'/pages/user/release'
	})
}

const gotuFn=()=>{
	uni.navigateTo({
		url:'/pages/news/news'
	})
}

const gotuFn1=()=>{
	uni.navigateTo({
		url:'/pages/collection/collection'
	})
}

			// url:`/pages/collection/supply_details?id=${id}&userId=${user_id}`
const tiaoz=(id,user_id)=>{
	// console.log();
	if(isLogin.value){
		uni.navigateTo({
			url:'/pages/collection/supply_details?id='+id+'&userId='+user_id
		})
		console.log('111');
	}else{
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}

}
</script>

<style lang="scss" scoped>
	.gui-item1{
		width: 23%;
	}
	.index{
		// height: 400rpx;
		position: relative;
		.jia{
			width: 98rpx;
			height: 98rpx;
			position: fixed;
			bottom: 292rpx;
			right: 18rpx;
		}
	}
	.article{
		// margin-top: 172rpx;
		margin-top: 74rpx;
		width: 94%;
		margin-left: 3%;
		.caigou{
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			.caigou-left{
				width: 80%;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
				position: relative;
				&::before {
					content: '';
				   width: 160rpx;
				   height: 12rpx;
				   background: linear-gradient(99deg, #00BB78 0%, rgba(0,187,120,0) 100%);
				   border-radius: 0rpx 0rpx 0rpx 0rpx;
				   opacity: 1;
				   position: absolute;
				   bottom: 20rpx;
				   z-index:-1;
				}
			}
			.caigou-right{
				width: 20%;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #19C281;
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				.caigou-duo{
					
				}
				.img{
					.left{
						width: 28rpx;
						height: 28rpx;
						// vertical-align: middle;
						margin-top: 27rpx;
					}
				}
				
			}
		}
	}
.article-title {
    &::before {
        content: '';
        width: 8rpx;
        height: 34rpx;
        display: block;
        margin-right: 10rpx;
        background: $u-type-primary;
    }
}
.bg-class{
	width: 100%;
	.bg{
		width: 100%;
	}
}
.swiper1{
	position: absolute;
	// top: 204rpx;
	top:79rpx;
	// margin-left: 5%;
	// width: 90%;
	width: 100%;
	// height: 400rpx;
	// margin-bottom: 28rpx;
}



.news-card {
    // border-bottom: 1px solid #f8f8f8;
	margin-bottom: 20rpx;
	
border-radius: 16rpx 16rpx 16rpx 16rpx;
    &-content {
        &-title {
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        &-intro {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}
.card-titel{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #333333;
}
.gui{
	display: flex;
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #777777;
	margin-top: 22rpx;
}
.phone{
	margin-top: 22rpx;
	display: flex;
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #333333;
}
.bg-white1{
	background-color: #fff;
}
</style>
